<template>
	<view class="ALL">
		<image :src="bg" mode=""></image>
		<view class="box">
			<view class="top">
				<text>快速预约</text>
			</view>
			<view class="mid">
				<view class="mid-userid">
					<!-- <input type="text" value="" placeholder="请输入想要的车型" @input="userId" /> -->
					<str-autocomplete :stringList="stringList" :importvalue="title" @select="selectOne"  @change="textChange" highlightColor="#FF0000" v-model="title"></str-autocomplete>
				</view>
				<view class="mid-time">
					<view class="mid-time-left">
						<!-- <picker class="uni-input" mode="date" :value="startdate" :start="startDate" @change="startbindDateChange">
							<view >{{startdate}}</view>
						</picker> -->
						<e-picker class="uni-input"  mode="dateTime" @change="changestart">{{startdate}}</e-picker>
					</view>
					<view class="mid-mid">
						<view></view>
					</view>
					<view class="mid-time-right">
						<!-- <picker class="uni-input" mode="date" :value="enddate" :end="endDate" @change="endbindDateChange">
							<view>{{enddate}}</view>
						</picker> -->
						<e-picker class="uni-input"  mode="dateTime" @change="changeend">{{enddate}}</e-picker>
					</view>
				</view>
				<view class="ensure" @tap="appoint">
					<text>提交</text>
				</view>
			</view>
			<view class="index" @tap="index">
				<text>直接进入主页</text>
			</view>
		</view>

	</view>
</template>

<script>
	// import strAutocomplete from '@/components/str-autocomplete/str-autocomplete.vue'
	// import uniIndexedList from "@/components/uni-indexed-list/uni-indexed-list.vue"
	import request from '../../requst.js' //引进requst方法
	import icons from "../../common/icons.js"
	export default {
		components: {
		    // strAutocomplete
		  },
		// components: {
		// 	uniIndexedList
		// },
		data() {
			const startcurrentDate = this.getDate({
				format: true
			})
			const endcurrentDate = this.getDate({
				format: true
			})
			return {
				show: false,
				startdate: '取车日期',
				enddate: '还车日期',
				carband:'',
				bg:icons.icons.bg,
				stringList:[],
				carIdList:[],
				title:'',
				birthday: '还车日期',
				carId:''
			}
		},
		computed: {
			// startDate() {
			// 	return this.getDate('start');
			// },
			// endDate() {
			// 	return this.getDate('end');
			// }
		},
		onLoad() {
			var that=this
			request({
				url: "qijian/homePage/carBrand",
				method: 'GET',
				success: function(res) {
					console.log(res);
					if(res.data.code==401){
						uni.showToast({
							title:'登录过期，请重新登录'
						})
						uni.reLaunch({
							url:'../login/login'
						})
					}else if(res.data.code==200){
						
					}
				}
			}),
			request({
				url:"qijian/homePage/retrieval",
				method:'POST',
				data:{
					"carAddress": "",
					"key": "",
					"limit": 50,
					"order": "",
					"page": 10,
					"sidx": ""
				},
				success:function(res){
					console.log(res)
					if(res.data.code==200){
						for(let i=0;i<res.data.data.records.length;i++){
							let data={}
							data.id=res.data.data.records[i].carId
							data.name=res.data.data.records[i].carName
							that.carIdList.push(data)
							that.stringList.push(res.data.data.records[i].carName)
						}
						console.log(that.stringList)
					}
				}
			})
		},
		methods: {
			changeend(e) {
				console.log(e)
			    this.enddate = e
			},
			changestart(e) {
				console.log(e)
			    this.startdate = e
			},
			appoint(){
				console.log(this.startdate)
				console.log(this.enddate)
				if(this.startdate=='取车日期'||this.enddate=='还车日期'){
					uni.showToast({
						title:'请输入正确日期',
						icon:'none'
					})
				}else{
					request({
					url:'/qijian/homePage/reservationNow',
					method:'GET',
					data:{
						"carId": this.carId,
						"rentalTime": this.startdate,
						"returnTime": this.enddate
					},
					success:function(res){
						console.log(res)
						if(res.data.code==200){
							
						}else{
							uni.showToast({
								title:'预约失败',
								icon:'none'
							})
						}
					}
				})
				}
				
			},
			index(){
				uni.switchTab({
					url:'../index/index'
				})
			},
			Show() {
				this.show = true
			},
			userId(e){
				this.carband=e.target.value
			},
			startbindDateChange: function(e) {
				// console.log(e)
				this.startdate = e.target.value
			},
			endbindDateChange: function(e) {
				// console.log(e)
				this.enddate = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			selectOne(opt) {
			      this.title = opt
			      console.log(opt)
				  for(let i=0;i<this.carIdList.length;i++){
					  if(this.carIdList[i].name==this.title){
						  console.log(this.carIdList[i].id)
						  this.carId=this.carIdList[i].id
						  return
					  }
				  }
			    },
			    textChange(opt) {
			      console.log(opt)
			    },
			    changeTitle(text) {
			      this.title = text
			    }
		}
	}
</script>

<style scoped>
	.ALL {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.ALL>image {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		z-index: -1;
	}

	.box {
		width: 686rpx;
		height: 622rpx;
		margin-top: 320rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		align-items: center;
	}

	.top {
		width: 100%;
		margin-top: 60rpx;
		text-align: center;
	}

	.top>text {
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 1000;
		color: #212121;
	}

	.mid-userid {
		width: 624rpx;
		height: 130rpx;
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #E6E9EE;
	}

	.mid-userid>input {
		margin-top: 40rpx;
	}
	.mid-time{
		width: 624rpx;
		height: 130rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.mid-time-left{
		width: 274rpx;
		height: 100rpx;
		padding-top: 30rpx;
		border-bottom: 2rpx solid #E6E9EE;
	}
	.mid-time-right{
		width: 274rpx;
		height: 100rpx;
		padding-top: 30rpx;
		border-bottom: 2rpx solid #E6E9EE;
	}
	.uni-input{
		margin-top: 60rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 800;
		color: #333333;
	}
	.mid-mid{
		width: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.mid-mid>view{
		margin-top: 40rpx;
		width: 16rpx;
		height: 2rpx;
		background-color: #979797;
	}
	.ensure {
		width: 624rpx;
		height: 88rpx;
		background: #000000;
		border-radius: 12rpx;
		color: #B6914E;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 1000;
		margin-top: 60rpx;
	}
	.index{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-top: 34rpx;
	}
</style>
